<template>
  <div class="container">
    <div class="OuterBox">
      <!-- 头部列表 -->
      <div>
        <span>关键字</span
        ><el-input
          v-model="input"
          class="Keyword"
          placeholder="跟据文章标题搜索"
        ></el-input
        ><span class="StatusTxt">状态</span>
        <el-select
          v-model="select"
          slot="prepend"
          placeholder="请选择"
          class="State"
        >
          <el-option label="启用" value="1"></el-option>
          <el-option label="禁用" value="0"></el-option>
        </el-select>
        <el-button class="DefaultButton" @click="select = ''">清除</el-button>
        <el-button type="primary" @click="SearchInterviewSkills"
          >搜索</el-button
        >
        <el-button
          type="primary"
          icon="el-icon-edit"
          class="NewTechnique"
          @click="dialogFormVisible = true"
          >新增技巧</el-button
        >
      </div>
      <!--  提示多少条数据 -->
      <p class="DataPrompt">
        <i class="el-icon-info"></i> 数据一共{{ Database }}条
      </p>
      <!-- table表格 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="序号" type="index">
        </el-table-column>
        <el-table-column label="文章标题" width="400">
          <template slot-scope="scope">
            <!-- scope.row用来拿到遍历的每一项 -->
            <p>
              {{ scope.row.title }}
              <span
                :class="scope.row.videoURL ? 'el-icon-video-camera-solid' : ''"
                @click="PlayVideo(scope.row)"
              ></span>
            </p>
          </template>
        </el-table-column>
        <el-table-column prop="visits" label="阅读数"> </el-table-column>
        <el-table-column prop="username" label="录入人"> </el-table-column>
        <el-table-column label="录入时间">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="state" label="状态" width="100">
          <template slot-scope="scope">
            <p v-if="tableData[scope.$index].state === 1">已启用</p>
            <p v-else>已禁用</p>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" width="180">
          <template slot-scope="scope">
            <a
              href="javascript:;"
              class="Preview Blue"
              @click="PreviewArticle(scope.row)"
              >预览</a
            >
            <a
              href="javascript:;"
              v-if="scope.row.state ? false : true"
              class="OpenUp Blue"
              @click="StatusOfTheArticle(scope.row.id, scope.row.state,scope.$index)"
              >启用</a
            >
            <a
              href="javascript:;"
              v-else
              class="OpenUp Blue"
              @click="StatusOfTheArticle(scope.row.id, scope.row.state,scope.$index)"
              >禁用</a
            >
            <!-- 修改 -->
            <a
              href="javascript:;"
              class="Revise"
              :class="{ Blue: scope.row.state ? true : false }"
            >
              <span
                :class="{
                  ActuallyDisableInMouse: !scope.row.state ? true : false,
                }"
                @click="ModifyArticles(scope.row,scope.$index)"
                >修改</span
              >
            </a>
            <!-- 删除 -->
            <a
              href="javascript:;"
              class="Delete"
              :class="{ Blue: scope.row.state ? true : false }"
            >
              <span
                :class="{
                  ActuallyDisableInMouse: !scope.row.state ? true : false,
                }"
                @click="DeleteArticle(scope.row.id, scope.$index)"
                >删除</span
              >
            </a>
          </template>
        </el-table-column>
      </el-table>
      <div class="PagingPart">
        <el-pagination
          class="Paging"
          background
          @size-change="SwitchPaging"
          :total="num"
          :page-sizes="[5, 10, 20, 30]"
          layout="  prev, pager,next,sizes, jumper"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
      <!-- 文本编辑弹出层 -->
      <div>
        <!-- 新增技巧弹出层 -->
        <el-dialog
          title="新增文章"
          :visible.sync="dialogFormVisible"
          class="PagingPart"
        >
          <!-- 弹出层内容区域 -->
          <div>
            <!-- 取消和提交 -->
            <RichTextEditor
              @CancelNewlyAdded="dialogFormVisible = false"
              @ConfirmTheSubmissionArticle="ConfirmTheSubmissionArticle"
            ></RichTextEditor>
          </div>
        </el-dialog>
        <!-- 修改文章模块弹出层 -->
        <el-dialog
          title="修改文章"
          :visible.sync="DialogformModification"
          class="PagingPart"
        >
          <!-- 弹出层内容区域 -->
          <div>
            <!-- 取消和提交 -->
            <ModifyArticles
              v-if="DestroyedChildComponent"
              :ModifyTheArticleData="ModifyTheArticleData"
              :ModifyTheArticleIndex="ModifyTheArticleIndex"
              @CancelNewlyAdded="DialogformModification = false"
              @DestroyedChildComponent="DestroyedChildComponent = false"
              @ConfirmthesubmissionArticleXModification="
                ConfirmthesubmissionArticleXModification
              "
            ></ModifyArticles>
          </div>
        </el-dialog>
        <!-- 预览弹出层 -->
        <div>
          <el-dialog title="预览文章" :visible.sync="DialogvisiblePreview">
            <PreviewModule :EachArticleData="EachArticleData"></PreviewModule>
          </el-dialog>
        </div>
      </div>
    </div>
    <div class="MaskLayer" v-if="DisplayVideo">
      <i class="el-icon-circle-close" @click="DisplayVideo=false"></i>
      <video src="5666" class="video">{{PlayVideoData}}</video>
    </div>
  </div>
</template>

<script>
// 文章列表,文章删除,文章状态,文章添加
import { list, remove, changeState, add, update } from '@/api/hmmm/articles.js'
// 新增技巧模块
import RichTextEditor from '../components/RichTextEditor.vue'
// 时间过滤
import { parseTime } from '@/utils/index.js'
// 预览模块
import PreviewModule from '../components/PreviewModule.vue'
// 修改文章模块
import ModifyArticles from '../components/ModifyArticles.vue'

export default {
  components: {
    RichTextEditor,
    PreviewModule,
    ModifyArticles
  },
  name: 'InterviewSkills',
  data () {
    return {
      parseTime: parseTime,
      input: null, // 关键字
      select: '',
      page: 1,
      // 表格数据
      tableData: [],
      num: 0,
      Database: '',
      DataNumber: 10, // 分页数据
      dialogTableVisible: false,
      dialogFormVisible: false,
      DialogvisiblePreview: false, // 预览文章开关
      EachArticleData: {}, // 每一条文章的数据
      DialogvisibleVideo: false, // 播放视频开关
      PlayVideoData: {}, // 播放视频数据
      ModifyTheArticleData: {}, // 修改文章的数据
      ModifyTheArticleIndex: '',
      DialogformModification: false,
      DestroyedChildComponent: false,
      DisplayVideo: false
    }
  },
  methods: {
    // 请求文章列表
    async RequestArticleList () {
      const { data } = await list({
        page: 1,
        pagesize: this.DataNumber
      })
      this.tableData = data.items
      this.num = parseInt(data.counts)
      this.Database = data.counts
      console.log(this.tableData)
    },
    // 切换当前页
    async handleCurrentChange (val) {
      const { data } = await list({
        page: val,
        pagesize: this.DataNumber
      })
      this.tableData = data.items
      this.num = data.counts
    },
    // 搜索请求
    async SearchInterviewSkills () {
      console.log(this.input, '搜索成功')
      const { data } = await list({
        pagesize: this.DataNumber,
        keyword: this.input || '',
        state: this.select
      })
      this.Database = data.items.length
      this.tableData = data.items
      this.num = data.counts
    },
    async SwitchPaging (val) {
      this.DataNumber = val
      const { data } = await list({
        pagesize: this.DataNumber,
        keyword: this.input
      })
      this.tableData = data.items
      this.num = data.counts
    },
    // 删除面试技巧的接口
    DeleteArticle (id, index) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        await remove({
          id
        })
        this.tableData.splice(index, 1)
      })
    },
    // 切换禁用和启用
    async StatusOfTheArticle (id, state, index) {
      if (state === 0) {
        state = 1
        this.tableData[index].state = 1
      } else {
        state = 0
        this.tableData[index].state = 0
      }
      await changeState({
        id,
        state
      })
      this.$message({
        type: 'success',
        message: '操作成功!'
      })
      console.log(index)
      // this.RequestArticleList()
    },
    async ConfirmTheSubmissionArticle (val) {
      await add({
        title: val.ArticleTitle,
        articleBody: val.Content,
        videoURL: val.VideoAddress
      })
      this.$message({
        type: 'success',
        message: '添加成功!'
      })
      this.dialogFormVisible = false
      this.RequestArticleList()
    },
    PreviewArticle (data) {
      this.EachArticleData = data
      console.log(this.EachArticleData)
      this.DialogvisiblePreview = true
    },
    // 播放视频方法
    PlayVideo (data) {
      console.log(data)
      this.DisplayVideo = true
      this.DialogvisibleVideo = true
      this.PlayVideoData = data
    },
    // 修改文章
    ModifyArticles (Articledata, index) {
      console.log(Articledata.id)
      this.ModifyTheArticleData = Articledata
      this.ModifyTheArticleIndex = index
      this.DestroyedChildComponent = true
      this.DialogformModification = true
    },
    // 文章数据
    async ConfirmthesubmissionArticleXModification (datalist, index) {
      this.DialogformModification = false
      this.DestroyedChildComponent = false
      console.log(datalist)
      const { datas } = await update({
        title: datalist.ArticleTitle,
        articleBody: datalist.Content,
        videoURL: datalist.VideoAddress,
        id: datalist.id
      })
      console.log(datas)
      this.$message({
        type: 'success',
        message: '修改成功!'
      })
      this.tableData[index].title = datalist.ArticleTitle
      this.tableData[index].articleBody = datalist.Content
      this.tableData[index].videoURL = datalist.VideoAddress
    }
  },
  created () {
    this.RequestArticleList()
    console.log()
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.container {
  padding-left: 10px;
  padding-right: 10px;
  font-size: 15px;
  // 头部列表
  .OuterBox {
    position: relative;
    width: 100%;
    font-size: 15px;
    background-color: #fff;
    border-top: 1px solid #d8dce5;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 12%), 0 0 3px 0 rgb(0 0 0 / 4%);
    border-radius: 3px;
    padding: 10px;
    .Keyword {
      width: 230px;
      margin-left: 15px;
    }
    .StatusTxt {
      margin-left: 60px;
    }
    .State {
      margin-left: 15px;
    }
    .DefaultButton {
      margin-left: 15px;
    }
    .NewTechnique {
      background-color: #67c23a;
      position: absolute;
      right: 5px;
      border: none;
      font-size: 15px;
    }
  }
  // 提示多少条数据
  .DataPrompt {
    background-color: #f4f4f5;
    height: 40px;
    line-height: 40px;
    padding-left: 20px;
    color: #adadad;
  }
  .PagingPart {
    .Paging {
      margin-top: 10px;
      margin-left: 40px;
    }
  }
}
// 查看图片
.el-icon-video-camera-solid {
  color: #160eff;
  cursor: pointer;
  margin-left: 10px;
}
// 预览

// 启用
.OpenUp {
  margin-left: 10px;
}
// 修改
.Revise {
  margin-left: 10px;
}
// 删除
.Delete {
  margin-left: 10px;
}
// 高亮颜色
.Blue {
  color: #409eff;
}
// 鼠标禁用图标
.MouseDisable {
  cursor: not-allowed;
}
// 鼠标实际禁用
.ActuallyDisableInMouse {
  pointer-events: none;
}
.DeleteTheInterviewSkillsToPopUpTheLayer {
  position: relative;
  background-color: rgb(129, 128, 128);
}
.MaskLayer{
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.4);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99999999999999;
  .el-icon-circle-close{
    font-size: 60px;
    margin-left: 50%;
    transform: translateX(-50%);
    margin-top: 50px;
    cursor:pointer;/*鼠标变小手*/;
    color: #044969;
  }
  .video{
    width: 50%;
    margin-left: 50%;
    transform: translateX(-50%);
    margin-top: 20px;
  }
}
</style>
